import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/tabbar/home/index.vue'
import reply from '../views/tabbar/reply/index.vue'
import learn from '../views/tabbar/learn/index.vue'
import learnDetail from '../views/tabbar/learn/detail.vue'
import mine from '../views/tabbar/mine/index.vue'
import profile from '../views/tabbar/mine/profile.vue'
import winRecord from '../views/tabbar/mine/winRecord.vue'
import replyRecord from '../views/tabbar/mine/replyRecord.vue'
import memo from "../views/tabbar/home/memo.vue"
import memo2 from "../views/tabbar/reply/memo.vue"
import store from '@/store'
import { ref } from 'vue';

const tabbarPaths = ref(['/index','/reply','/learn','/mine'])

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    props: true,    
    component: () => import('@/views/login.vue'),
    meta: { requiresAuth: false, title: '登录' },
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: false, title: '首页' },
  },
  {
    path: '/index/:id',
    component: Home,
    props: true,
    meta: { requiresAuth: false, title: '首页' },
  },
  {
    path: '/reply',
    component: reply,
    props: true,
    meta: { requiresAuth: true, title: '答题' },
  },
  {
    path: '/learn',
    component: learn,
    props: true,
    meta: { requiresAuth: true, title: '学习园地' },
    children:[]
  },
  {
    path: '/learn/learnDetail/:id',
    component: learnDetail,
    props: true,
    meta: { requiresAuth: true, title: '学习园地详情' },
  },
  {
    path: '/mine',
    component: mine,
    props: true,
    meta: { requiresAuth: true, title: '我的' },
  },
  {
    path: '/mine/profile',
    component: profile,
    props: true,
    meta: { requiresAuth: true, title: '个人信息' },
  },
  {
    path: '/mine/winRecord',
    component: winRecord,
    props: true,
    meta: { requiresAuth: true, title: '我的中奖记录' },
  },
  {
    path: '/mine/replyRecord',
    component: replyRecord,
    props: true,
    meta: { requiresAuth: true, title: '我的答题记录' },
  },
  {
    path: '/taskDetail',
    name: 'taskDetail',
    component: () => import('../views/taskDetail.vue'),
    meta: { requiresAuth: false, title: '活动详情' },
  },
  {
    path: '/home/memo',
    component: memo,
    props: true,
    meta: { requiresAuth: true, title: '活动说明' },
  },
  {
    path: '/reply/memo',
    component: memo2,
    props: true,
    meta: { requiresAuth: true, title: '规则说明' },
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta: { requiresAuth: false,title:"关于" },
  },
  {
    path: '/empty',
    name: 'empty',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/empty.vue'),
    meta: { requiresAuth: false,title:"跳转页" },
  },
  {
    path:'/answer/:id/:type?',
    name:'Answer',
    props:true,
    component: () => import('../views/Answer.vue'),
    meta: { requiresAuth: true, title: '答题' }, // 需要登录
  },
  {
    path:'/contact-info',
    name:'Contact',
    props:true,
    component: () => import('../views/ContactInfo.vue'),
    meta: { requiresAuth: true, title: '联系人信息' },
  },  
  {
    path:'/redPacket',
    name:'redPacket',
    props:true,
    component: () => import('../views/redPacket/index.vue'),
    meta: { requiresAuth: true, title: '红包' },
  },
  {
    path:'/redPacket/detail',
    name:'redPacketDetail',
    props:true,
    component: () => import('../views/redPacket/detail.vue'),
    meta: { requiresAuth: true, title: '红包详情' },
  },
  {
    path:'/awardsList',
    name:'awardsList',
    props:true,
    component: () => import('../views/awards/list.vue'),
    meta: { requiresAuth: true, title: '获奖信息' },
  },
  {
    path:'/getAward',
    name:'getAward',
    props:true,
    component: () => import('../views/getAward.vue'),
    meta: { requiresAuth: true, title: '领奖' },
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach(async (to, from) => {
  document.title = to?.meta?.title as string || 'APP';
  
  // 判断是否已登录
  // const token = localStorage.getItem('token');
  const token = sessionStorage.getItem('token');
  // 判断当前页面是否需要登录
  const isRequiresAuth = to.meta.requiresAuth;
  // to.name !== 'Login' 避免无限重定向
  if (!token && isRequiresAuth && to.name !== 'Home') {
     // 记录跳转前路由
    localStorage.setItem('fullPath', to.fullPath);
    // 将用户重定向到登录页面
    return { name: 'Home' }
  }
  let pathSp = to.fullPath.split("/")
  tabbarPaths.value.map((item) => {
    // pathSp.map((item2) => {
    //   if(item.indexOf(item2) > -1){
    //     console.log("更新active",to.fullPath.split("/")[1])
    //     store.commit('updateActive',to.fullPath.split("/")[1])
    //   }
    // })
    if(item.indexOf(pathSp[1]) > -1){
        console.log("更新active",to.fullPath.split("/")[1])
        store.commit('updateActive',to.fullPath.split("/")[1])
      }
  })
})

export default router
